<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        span, a {
            display: inline-block;
            height: 30px;
            padding: 10px 112px;
            line-height: 30px;
            background: green;
        }

        /*默认的样式*/
        a:link {
            color: green;
        }

        /* 放在上面*/
        a:hover {
            color: blue;
        }

        /*点击时*/
        a:active {
            color: yellow;
        }

        /*点击后*/
        a:visited {
            /*color: red;*/
        }

        span:hover {
            background: rgba(117, 53, 107, 0.35);
        }


    </style>

</head>
<body>

<!--
注意 这里":" 是在英文输入法的: 中文输入法下的:可能无法实现功能 伪类选择器不一定是链接,任何标签都可以

:link 向未被访问的链接添加样式 (光标没有放在上面默认的样式)
:hover 当鼠标悬浮上方时,向元素添加样式 (光标放在上面还没点)
:active 向被激活的元素添加样式 (光标放在上面点击时)
:visited 向被访问的链接添加样式 (光标放在上面点击后)
-->

<a href="#">www.baidu.com</a>


<span class="body-style"> 测试 </span>


</body>
</html>